<template>
    <div class="app-container">
        <div class="content">
            <div class="aside">
                <div class="tree-header">
                    <span><svg-icon icon-class="type" class-name='type-class'/>&nbsp;&nbsp;科室列表</span>
                </div>
                <el-tree
                        :data="tableData"
                        @node-click="handleXmxz"
                        highlight-current:true
                        check-on-click-node:true
                        show-checkbox:true
                        default-expand-all
                        node-key="id"
                        ref="tree"
                        class="tree"
                        :expand-on-click-node="false"
                        highlight-current
                        :render-content="treeRender">
                </el-tree>
            </div>
            <el-container>
                <el-header height="50px" class="item-header">
                    <div class="main-title">排班详情</div>
                </el-header>
                <el-table :data="doctor" size="mini" style="margin-top: 30px;">
                    <el-table-column align="center" prop="doctorName" label="医生姓名" width="100px" fixed="left"></el-table-column>
                    <el-table-column align="center" width="100px" label="科室" fixed="left">
                        <template slot-scope="scope">
                            {{scope.row.dept.deptName}}
                        </template>
                    </el-table-column>
<!--                    <el-table-column align="center" prop="name" v-for="item in currentWeek" :key="item" :label="item">
                        <el-table-column align="center" label="上午">
                            <template slot-scope="scope">

                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="下午"></el-table-column>
                    </el-table-column>-->
                    <el-table-column align="center" label="操作" width="100px" fixed="right">
                        <el-button type="text" size="medium" icon="el-icon-s-tools"></el-button>
                    </el-table-column>
                </el-table>
            </el-container>
        </div>

    </div>
</template>

<script>
    import {GetDeptTypeList} from "@/api/dept/dept";
    import {GetDoctorByDept} from  '@/api/doctor/index'
    import {doctorSchedule} from  '@/api/schedule/schedule.js'

    import dayjs from 'dayjs'
    export default {

        data() {
            return {
                tableData:[],
                currentWeek: [],
                doctor:[],

            };
        },
        mounted() {
            this.getDeptTypeList()
            this.getDefaultTime();
        },
        methods: {
            //查询科室信息
            getDeptTypeList(){
                GetDeptTypeList().then(res => {
                    this.tableData = res.data
                })
            },
            //得到表头时间
            getDefaultTime(){
                let dow = dayjs().get('day');
                let lastWeek = dayjs().subtract(dow-1, 'days').format('YYYY-MM-DD')
                for (let i = 0; i < 7; i++) {
                    if(i == 0) {
                        this.currentWeek.push(lastWeek)
                    } else {
                        this.currentWeek.push(dayjs(lastWeek).subtract(i - i * 2, 'days').format('YYYY-MM-DD'))
                    }
                }
            },
            async  handleXmxz(obj, node, data) {
             await   GetDoctorByDept({deptId: obj.id}).then(res => {
                    if(res.code == 200){
                        this.doctor = res.rows
                        let d = this.doctor.map(obj => {return obj.doctorId}).join(",")
                        doctorSchedule(d).then(res => {
                            for (const key in res.data) {
                                console.log(key)
                            }
                        })
                    }
                })


            },
            treeRender(h, {node, data, store}) {
                return (
                    <span class="tree-node">
                    <span>
                    <svg-icon style="width: 14px;height: 14px;margin-right:5px" icon-class="file-close"
                v-show={!node.isLeaf && !node.expanded}></svg-icon>
                <svg-icon style="width: 14px;height: 14px;margin-right:5px" icon-class="file-open"
                v-show={!node.isLeaf && node.expanded}></svg-icon>
                <el-badge>
                <span>{node.label}</span>
                </el-badge>
                </span>

                    </span>
            );
            },
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        margin: -20px;
        height: calc(100% + 40px);
        display: flex;

        .aside {
            flex: 0 280px;
            position: relative;
            box-shadow: 1px 0px 4px rgba(0, 21, 41, 0.08);

            .tree-header {
                position: absolute;
                height: 50px;
                width: 100%;
                font-size: 36upx;
                line-height: 30px;
                font-family: PingFangSC-Regular;
                padding: 10px 22px;
                box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
            }

            .tree {
                margin-top: 55px;
                font-size: 28upx;

                > > > .tree-node {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 28upx;
                    padding-right: 8px;

                    .el-button + .el-button {
                        margin-left: 3px;
                    }

                }
            }

        }

        .service-item {
            flex: 1;
        }
    }

    .el-icon-folder {
        color: #519eff;
    }

    .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 20px;
        box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);

        .main-title {
            font-family: PingFangSC-Light;
            line-height: 20px;
            font-size: 32upx;
            display: inline-block;
            margin-right: 12px;
            padding-left: 10px;
            border-left: 4px solid #1890FF;
        }
    }

</style>

